Icon Usability: When and How to Evaluate Digital Icons圖示可用性:何時以及如何評估數字圖示

圖示可用性

圖示可用性決定於圖示是否易於使用者識別和正確解釋。一個有效的圖示可以幫助使用者理解介面功能,但若實現不佳,會對使用者造成困擾。圖示的識別度和解釋性是圖示可用性的兩大關鍵因素。

圖示識別度:指使用者能否識別出圖示所描繪的形狀或物體(例如,星形是否看起來像星星)。

圖示解釋性:指使用者在特定上下文中對圖示賦予的意義(例如,在某個介面中,星形是否表示收藏)。

圖示識別度

圖示識別度考察使用者是否能準確辨識出圖示的形狀。即使是簡單的形狀,有時也難以讓使用者識別出其所代表的物體。例如:

#1:Ribbon或Keyhole?(識別為獎勵,但有人認為是鑰匙孔)

#2:購物袋或公文包?(作為購物袋,有人誤解為公文包)

#3:購物袋、鎖還是剪貼簿?(YouTube應用使用的購物袋圖示,部分使用者認為是鎖或剪貼簿)

#4:選單還是檔案?(Saks Fifth Avenue使用的選單圖示,有人認為是檔案)

使用者對圖示的形狀感到困惑時,也會對其含義產生不確定性。因此,確保圖示形狀易識別是提升圖示可用性的第一步。

圖示解釋性

圖示解釋性是評估圖示是否傳達了預期功能。即使使用者能識別圖示的形狀,他們可能對其功能或含義的理解並不準確。例如:

多個應用程式使用“店面”圖示,但使用者對其功能的解釋各異,如返回首頁、檢視實體店位置、查詢附近門店、檢視分類選單等。

1 找一家實體店Nordstrom mobile app2 找一家實體店Sephora mobile app 3檢視並搜尋供應商Ramp website 4檢視購物類別(選單)DSW mobile app DSW

不同使用者由於背景、經驗和文化差異,對相同圖示可能有不同的解釋。因此,在設計初期需要測試圖示的識別度和解釋性,避免假設使用者能輕易理解圖示的意圖。

影響圖示可用性的其他因素

除了識別度和解釋性,圖示的其他可用性因素還包括:

相關性:圖示是否與使用者任務和目標相符?

可發現性:圖示是否足夠顯眼,便於使用者發現?

可找到性:使用者能否在需要時找到圖示?

點選/觸控準確性:圖示尺寸是否足夠大,避免誤觸?

視覺吸引力:圖示的外觀是否吸引人?

這些因素共同作用,以提高圖示的整體可用性。

圖示評估方法的選擇

選擇合適的評估方法需明確研究目標和問題。圖示評估分為兩種主要方法:離散環境測試和上下文環境測試,即在隔離環境下展示圖示或在實際介面上下文中展示圖示。

示例:電商網站的新商品圖示測試

圖示評估指南

研究問題相關屬性評估方法評估時機
這個圖示對使用者來說看起來像計時器嗎?識別度離散環境識別調查:單獨展示圖示(無文字標籤),詢問使用者該圖示是什麼或代表什麼。<br>上下文截圖測試:展示包含圖示的介面截圖,詢問使用者看到的圖示以及它們在上下文中的功能。設計初期
使用者是否理解並將計時器圖示與“新品”關聯起來?解釋性離散環境調查:單獨展示圖示並詢問在電商網站中看到它時使用者會認為該圖示的功能是什麼。<br>介面上下文中測試:展示圖示在介面中的實際位置,詢問使用者看到的圖示及其功能。設計初期或有介面模型時
使用者喜歡圖示的外觀嗎?視覺吸引力離散環境評分:展示圖示並讓使用者使用語義差異或李克特量表進行評分。<br>離散環境偏好測試:展示不同樣式的圖示版本,瞭解使用者的偏好。設計初期或重設計階段
圖示是否適用於尋找新品的使用者任務?相關性上下文可用性測試:讓使用者執行與尋找新品相關的任務,觀察使用者是否使用該圖示。<br>上下文A/B測試:展示不同圖示選項的變體,觀察使用者的選擇。有原型或上線後
使用者是否注意到介面中的圖示?是否能找到圖示?可發現性、可找到性上下文可用性測試或點選測試:如果使用者沒有與圖示互動或互動時間過長,說明圖示可能不夠顯眼。有原型或上線後
使用者能否輕鬆準確地點選圖示?目標獲取上下文可用性測試:提供與圖示相關的任務,觀察使用者是否能夠可靠地點選圖示而不會誤選其他目標。確保遵循觸控目標大小的通用指南。有原型或上線後

如果您希望深入瞭解圖示設計,可以參考書籍《Digital Icons That Work》,該書基於最新的圖示研究提供了豐富的設計指南。